<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由的使用</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <!--路由导航-->
            <router-link to="/home">首页</router-link>
            <router-link to="/about">关于我们</router-link>
        </p>
        <div class="content">
            <!--路由渲染显示组件内容-->
            <router-view></router-view>
        </div>
    </div>
    <script>
        const Home = { template: '<div>首页的内容</div>' }
        const About = { template: '<div>关于我们的内容</div>' }
        
        const routes = [
            { path: "/home", component: Home },
            { path: "/about", component: About }
        ]
        
        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes
        })
        
        const app = Vue.createApp({})
        app.use(router)
        app.mount("#app")
    </script>
</body>
</html>